@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$message: () !default;
$message: map.merge(
  (
    color: inherit,
    bg-color: get-css-var('bg-color-base'),
    b-color: get-css-var('border-color-light-2'),
    radius: get-css-var('radius-base'),
    s-color: get-css-var('shadow-color-base'),
    shadow: get-css-var('shadow-shape') get-css-var('message-s-color'),
    v-padding: 8px,
    h-padding: 10px,
    mask-bg-color: transparent,
    icon-color: get-css-var('message-color'),
    close-color: get-css-var('content-color-placeholder'),
    close-color-hover: get-css-var('content-color-base')
  ),
  $message
);

.#{$namespace}-message {
  &-vars {
    @include define-preset-values('message', $message);
  }

  @mixin define-message-style($style-map) {
    @include define-preset-style('message', $style-map);
  }

  @include basis;

  display: flex;
  flex-direction: column;
  align-items: center;

  $icon: #{&}__icon;
  $close: #{&}__close;

  &__wrapper {
    display: flex;
  }

  &__icon {
    display: flex;
    align-items: center;
    margin-inline-end: 8px;
    color: get-css-var('message-icon-color');
  }

  &__close {
    display: flex;
    align-items: center;
    padding: 0;
    margin-inline-start: 14px;
    color: get-css-var('message-close-color');
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    transition: get-css-var('transition-color');

    &:hover,
    &:focus {
      color: get-css-var('message-close-color-hover');
    }
  }

  &__item {
    display: flex;
    padding: get-css-var('message-v-padding') get-css-var('message-h-padding');
    color: get-css-var('message-color');
    background-color: get-css-var('message-bg-color');
    border: get-css-var('border-shape') get-css-var('message-b-color');
    border-radius: get-css-var('message-radius');
    box-shadow: get-css-var('message-shadow');

    &::before {
      @include inner-fixed;

      pointer-events: none;
      background-color: get-css-var('message-mask-bg-color');
      border-radius: get-css-var('message-radius');
      opacity: 80%;
    }

    &--background::before {
      content: '';
    }

    $types: info success warning error;

    @each $type in $types {
      $color: if($type == 'info', 'primary', $type);

      &--color-only#{&}--#{$type} {
        @include define-message-style(
          (
            color: 'color' $color 'base',
            close-color: 'color' $color 'opacity-5',
            close-color-hover: 'color' $color 'base'
          )
        );
      }

      &--background#{&}--#{$type} {
        @include define-message-style(
          (
            b-color: 'color' $color 'opacity-5',
            mask-bg-color: 'color' $color 'opacity-9',
            shadow: unset,
            close-color: 'color' $color 'opacity-7',
            close-color-hover: 'color' $color 'opacity-2'
          )
        );
      }

      &--background#{&}--color#{&}--#{$type} {
        @include define-message-style(
          (
            color: 'color' $color 'dark-2',
            icon-color: 'color' $color 'dark-1'
          )
        );
      }

      &--#{$type} {
        @include define-message-style(
          (
            icon-color: 'color' $color 'base'
          )
        );
      }
    }
  }
}
